<template>
    <div>

        <!-- 条件查询 -->
        <el-row>
             <el-col :span="24"><div class="grid-content bg-purple-dark">
                 <el-form :inline="true" :model="searchData"  class="demo-form-inline">

                    <el-form-item label="题目ID">
                      <el-input v-model="searchData.id" clearable></el-input>
                    </el-form-item>

                   <el-form-item label="年级" :label-width="formLabelWidth">
                       <el-select v-model="searchData.ade" placeholder="请选择" clearable>
                         <el-option
                           v-for="item in grade"
                           :value="item.dictValue" 
                           :key="item.dictValue"             
                           :label="item.dictLabel">
                         </el-option>
                       </el-select>
                   </el-form-item>


                   <el-form-item label="学科" :label-width="formLabelWidth">
                       <el-select v-model="searchData.discipline" placeholder="请选择" clearable>
                         <el-option                 
                           v-for="item in findData"
                           :value="item.id" 
                           :key="item.id"             
                           :label="item.subject"
                           >
                         </el-option >
                       </el-select>              
                   </el-form-item>


                   <el-form-item label="题型" :label-width="formLabelWidth">
                       <el-select v-model="searchData.questions" placeholder="请选择" clearable>
                         <el-option
                           v-for="item in question"
                           :value="item.dictValue" 
                           :key="item.dictValue"             
                           :label="item.dictLabel">
                         </el-option>
                       </el-select>
                   </el-form-item>
                     <el-button type="primary" @click="search">查询</el-button>

                 </el-form>
                 </div></el-col>
           </el-row>


        <!-- 表格展示 -->
        <el-row>
             <el-col :span="24"><div class="grid-content bg-purple-dark">
                 <el-table :data="BuestionsData" height="550" border>
                    <el-table-column prop="id" label="Id" width="50"></el-table-column>
                   <el-table-column  label="学科" width="120">
                       <template slot-scope="scope">
                        {{ scope.row.discipline }}(
                           <span v-if="scope.row.ade ==0">一年级</span>
                           <span v-if="scope.row.ade ==1">二年级</span>
                           <span v-if="scope.row.ade ==2">三年级</span>
                           <span v-if="scope.row.ade ==3">四年级</span>
                           <span v-if="scope.row.ade ==4">五年级</span>
                           <span v-if="scope.row.ade ==5">六年级</span>
                           <span v-if="scope.row.ade ==6">初一</span>
                           <span v-if="scope.row.ade ==7">初二</span>
                           <span v-if="scope.row.ade ==8">初三</span>
                           <span v-if="scope.row.ade ==9">高一</span>
                           <span v-if="scope.row.ade ==10">高二</span>
                           <span v-if="scope.row.ade ==11">高三</span>
                        )
                       </template>

                   </el-table-column>

                   <el-table-column prop="questions" label="题型" width="80">
                    <template slot-scope="scope">
                            <span v-if="scope.row.questions ==0">单选题</span>
                            <span v-if="scope.row.questions ==1">多选题</span>
                            <span v-if="scope.row.questions ==2">判断题</span>
                            <span v-if="scope.row.questions ==3">填空题</span>
                            <span v-if="scope.row.questions ==4">简单题</span>
                        </template>
                   </el-table-column>
                   <el-table-column prop="questionText" label="题干" width="600"></el-table-column>
                   <el-table-column prop="score" label="分数" width="80"></el-table-column>
                   <el-table-column prop="difficultyLevel" label="难度" width="80"></el-table-column>
                   <el-table-column prop="creationTime" label="创建时间"></el-table-column>
                   <el-table-column label="操作" width="210">
                       <template slot-scope="scope">                           
                           <el-button size="small"  type="primary"  @click="get(scope.row)" plain>预览</el-button>
                           <el-button size="small"  type="primary"  @click="getID(scope.row)" plain>编辑</el-button>
                           <el-button size="small"  type="danger"    @click="deleteId(scope.row)" plain>删除</el-button>
                       </template>
                   </el-table-column>
                 </el-table>

               <!-- 分页 -->
               <div class="block">
                   <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-sizes="[2, 4, 6, 8]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total" style="float:right">
                   </el-pagination>
               </div>


                 </div></el-col>
           </el-row>
           <!-- 详情 -->
           <el-dialog

             :visible.sync="dialogFormVisible"
             width="30%">
             <p>{{this.questionText}}</p>
             <br>
             <p>A: &nbsp;&nbsp; {{this.A}} &nbsp;&nbsp; B: &nbsp;&nbsp; {{this.B}} &nbsp;&nbsp; C:&nbsp;&nbsp; {{this.C}} D:&nbsp;&nbsp; {{this.D}} </p>
             <span slot="footer" class="dialog-footer">

             </span>
           </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
            BuestionsData:[],
            formLabelWidth: '120px', //新增表单宽度
            pageNum:1,
            pageSize:6,
            total:null,
            searchData:{
                "id":'',
                "ade":"",
                "questions":'',
                "discipline":""

            },
            grade:[],
            question:[],
            findData:[],
            dialogFormVisible: false, //新增弹窗
            // dialogTitle:"添加数据",//控制标题
            getList:{
                "ade": "",
                "answer": "",
                "creationTime": "",
                "difficultyLevel": 0,
                "discipline": "",
                "explanation": "",
                "id": 0,
                "knowledgePoint": "",
                "modifyTime": "",
                "optionA": "",
                "optionB": "",
                "optionC": "",
                "optionD": "",
                "questionText": "",
                "questions": "",
                "score": 0
            },
            questionText:'',
            A:'',
            B:'',
            C:'',
            D:''
            
        }
    },
    created(){
        this.initTable()
        this.searchDict()
        this.gaea()

    },
    methods:{

      getID(row){
        //跳页面并带id
        sessionStorage.setItem("id",row.id);
          if(row.questions == 0){
            this.$router.push("/job")
          }else if(row.questions == 1){
            this.$router.push("/aa")
          }else if(row.questions == 2){
            this.$router.push("/bb")
          }else if(row.questions == 3){
            this.$router.push("/cc")
          }else if(row.questions == 4){
            this.$router.push("/dd")
          }
            
      },
        //详情
        get(row){
            this.dialogFormVisible=true
            this.questionText = row.questionText
            if(row.questions != 2 && row.questions != 3 && row.questions != 4){
                this.A = row.optionA
                this.B = row.optionB
                this.C = row.optionC
                this.D = row.optionD
            }
           
        },
        //年级
        searchDict(){
        axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
          this.grade =res.data.data
        })
        axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_question_type").then(res=>{
        this.question =res.data.data
        })
        },
        //查学科
         gaea(){
            axios.post("/api/subject/findSubjectPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,{})
                .then(res=>{
                    this.findData = res.data.data.items
                })
        },

        search(){
            this.initTable()
        },

        //查询
        initTable(){
            axios.post("/api/buestions/findTbBuestionsPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,this.searchData)
                .then(res=>{
                    this.BuestionsData = res.data.data.items
                    this.total = res.data.data.totalElements                 
                })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },
        deleteId(row){
            axios.delete("/api/buestions/deleteBuestionsById?id="+row.id).then(res=>{
                //弹框
                  this.$message({
                      message: res.data.message,
                      type: 'success'
                    });
                    this.initTable();//刷新表格
            })
        }



    }
}
</script>
<style scoped>

</style>